Using the ::selection Pseudo-Element in CSS
The ::selection pseudo-element in CSS allows you to style the portion of text that a user highlights (selects) with their cursor. It provides a way to customize the appearance of selected text, such as changing its background color, text color, or adding other visual effects.
::selectionapplies only to the text a user selects.You can style properties like
color,background-color,text-shadow, andcursor.Not all CSS properties are supported; mainly visual text properties work.
It works on most elements that contain selectable text.
In this example, when the user selects the paragraph text, the background changes to blue, the text color becomes white, and a subtle text shadow is applied, enhancing the visual feedback of text selection.
Use
::selectionto improve user experience and match your site's color scheme.Keep contrast high for readability when styling selections.
Test across different browsers, as some older browsers may have limited support.
Avoid adding complex animations or non-text styles, as these are not supported.